* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// 显示边框用
#b() {
  border: 1px red solid;
}

// 清除浮动用
.clearfix {
  #clear() {
    content: "";
    clear: both;
    display: table;
  }

  &::before {
    #clear();
  }

  &::after {
    #clear();
  }
}

ul {
  list-style: none;
}

:root {
  font-family: "微软雅黑";
}

a {
  text-decoration: none;
}

/* ==============清除浏览器样式========================= */
// 网页头部
header {
  @width: 1226px;
  @height: 40px;
  width: 1920px;
  font-size: 15px;
  background-color: #555;
  font-family: "微软雅黑";

  > nav {
    // #b();
    width: @width;
    margin: 0 auto;

    // 左导航栏的样式
    .nav_left {
      // 不独占一行
      float: left;
      list-style: none;
      display: flex;
      width: 505px;
      color: #ccc;
      text-align: center;
      line-height: @height;

      > li {
        flex: 1;
        height: @height;

        > a {
          color: #ccc;
          text-decoration: none;
        }
      }
    }

    // 右导航栏的样式
    .nav_right {
      // #b();
      list-style: none;
      float: right;
      display: flex;
      width: 494px;
      color: #ccc;
      text-align: center;
      line-height: @height;

      > li {
        // #b();
        height: @height;
        padding: 0 8px;

        // 手机子项的样式
        &:nth-child(5) {
          color: red;
          position: relative;

          &::after {
            content: "";
            display: inline-block;
            width: 7px;
            height: 7px;
            border-color: #ccc;
            border-style: solid;
            border-width: 1px 1px 0 0;
            margin: 9px;
            transform: rotate(135deg) translate(4px, -4px);
            // background-color: #fff;
          }

          // 鼠标移入时显示的列表
          .QR_ul {
            display: none;
            // #b();
            position: absolute;
            left: -158px;
            z-index: 999;
            background-color: #fff;
            box-shadow: 0 0 5px gray;

            // 鼠标移入时显示的列表子项
            > li {
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              width: 250px;
              height: 130px;

              // 二维码图片
              > img {
                width: 90px;
                height: 90px;
                vertical-align: bottom;
              }

              // 右侧部分
              > div {
                // #b();
                width: 121px;
                text-align: start;
                color: black;

                // 右侧文字部分
                > p {
                  // #b();
                  line-height: 35px;
                  font-size: 12px;

                  // 标题文字
                  &:nth-child(1) {
                    font-size: 15px;
                    font-weight: bold;
                  }
                }

                // 小图部分
                > div {
                  // #b();
                  // 三个小图
                  > img {
                    width: 37px;
                    height: 37px;
                    vertical-align: bottom;
                  }
                }
              }
            }
          }

          // 鼠标移入这个子项时
          &:hover {
            background-color: #fff;

            // 此子项内的超链接文字
            > a {
              color: red;
            }

            // 鼠标移入时显示此表
            .QR_ul {
              display: block;
            }
          }
        }

        // 购物车的样式
        &:nth-child(6) {
          position: relative;
          display: flex;
          align-items: center;

          > i {
            // #b();
            display: block;
            width: 29px;
            height: 27px;
            margin: 0 12px;
            background-image: url("../IMG/cart.png");
          }

          // #b();
          // 鼠标移入购物车时
          &:hover {
            background-color: #fff;

            & > i {
              background-image: url("../IMG/cart1.png");
            }

            > a {
              color: red;
            }

            > div {
              display: flex;
            }
          }

          // 鼠标移入时要展示的部分
          > div {
            // #b();
            display: none;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: -178px;
            top: 40px;
            z-index: 998;
            width: 330px;
            height: 95px;
            background-color: #fff;
            box-shadow: 0 0 5px gray;

            > p {
              color: #000;
            }
          }
        }

        // 列表子项超链接中默认的文字颜色
        > a {
          color: #ccc;
          text-decoration: none;
        }
      }
    }
  }
}
// 顶部模块部分
section {
  width: 1920px;

  // 容器
  .top_module {
    display: flex;
    align-items: center;
    width: 1226px;
    margin: 0 auto;
    // #b();

    // logo部分
    > .logo {
      // #b();
      // float: left;
      display: flex;
      align-items: center;
      width: 235px;
      height: 100px;

      > img {
        vertical-align: bottom;
        width: 150px;
        height: 60px;
      }
    }

    // 顶部模块菜单
    .menu {
      // float: left;
      width: 690px;

      .ul_menu {
        // #b();
        display: flex;
        // align-items: center;

        > li {
          // #b();
          line-height: 100px;
          margin-right: 30px;
          display: flex;
          align-items: center;

          > img {
            width: 20px;
            height: 20px;
            vertical-align: bottom;
          }

          > a {
            color: black;
            text-decoration: none;

            &:hover {
              color: red;
            }
          }
        }
      }
    }

    // 搜索框部分
    > form {
      // #b();
      // float: left;
      display: flex;
      align-items: center;

      input {
        &[type="text"] {
          width: 194px;
          height: 30px;
          border: 0;
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
          background-color: #ccc;
          outline: none;
          text-indent: 20px;
        }
      }

      > div {
        // #b();
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 30px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        background-image: url("../IMG/section/search.png");
        background-repeat: no-repeat;
        background-position: center;
        background-color: #aaa;
        cursor: pointer;
      }
    }
  }
}
// 网页主体部分
main {
  // 轮播图div
  .div_lunbo {
    // #b();
    @width: 1920px;
    @height: 500px;
    // 开含包含块
    position: relative;
    width: @width;
    height: @height;
    margin: 0 auto;
    overflow: hidden;

    // 图片ul的样式
    .ul_lunbo {
      display: flex;
      position: relative;

      > li {
        flex: 1;

        a {
          img {
            display: block;
            width: @width;
            height: @height;
          }
        }
      }
    }

    // 轮播图左右按钮
    > a {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);

      &::after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border: white solid;
        border-width: 2px 2px 0 0;
        // background-color: red;
      }

      // 轮播图左按钮
      &.lunbo_left {
        left: 583px;
        transform: rotate(-135deg);

        &::after {
          left: 45%;
          top: 55%;
        }
      }

      // 轮播图右按钮
      &.lunbo_right {
        right: calc((1920px - 1226px) / 2);
        transform: rotate(45deg);

        &::after {
          left: 45%;
          top: 55%;
        }
      }
    }

    // 轮播图导航的样式
    .lunbo_nav {
      // #b();
      list-style: none;
      display: flex;
      justify-content: center;
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translate(-50%);

      > li {
        width: 25px;

        > a {
          display: block;
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background-color: whitesmoke;
        }
      }
    }

    // 轮播图中的边侧商品列表
    .ul_aside {
      // #b();
      display: flex;
      flex-wrap: wrap;
      align-content: space-evenly;
      // 开启定位并居中
      position: absolute;
      left: calc((1920px - 1226px) / 2);
      top: 50%;
      transform: translateY(-50%);
      width: 236px;
      height: 460px;
      background-color: rgba(255, 255, 255, 0.8);

      // 每个列表子项
      > li {
        // #b();
        display: flex;
        align-items: center;
        width: 100%;
        // margin: 20px 0;
        font-size: 18px;
        font-family: "微软雅黑";
        line-height: 40px;

        // 鼠标移入时要展示的部分
        > div {
          display: none;
          // display: block;
          position: absolute;
          left: 236px;
          top: 0;
          width: 530px;
          height: 460px;
          background-color: #fff;

          // 商品列表
          > ul {
            // #b();

            // 列表行
            > li {
              > ul {
                display: flex;
                flex-wrap: wrap;
                padding: 10px 0;
                font-size: 14px;

                // 行内的元素
                > li {
                  margin-left: 20px;

                  > a {
                    text-decoration: none;
                    color: #555;

                    > img {
                      vertical-align: bottom;
                      width: 40px;
                      height: 40px;
                      margin: 0 10px;
                    }
                  }

                  &:first-child {
                    // #b();
                    width: 170px;
                  }
                }
              }
            }
          }
        }

        // 鼠标移入列表子项时
        &:hover {
          box-shadow: 0 0 5px 5px gray;

          & > div {
            display: block;
          }
        }

        // 列表子项中的所有图
        > img {
          vertical-align: bottom;

          // 列表子项中的第一个图
          &:first-of-type {
            width: 35px;
            height: 35px;
            margin: 0 10px;
          }

          // 列表子项中的最后一个图
          &:last-of-type {
            position: absolute;
            right: 5px;
            // background-color: red;
            width: 30px;
            height: 30px;
          }
        }

        // 列表子项中的a
        > a {
          text-decoration: none;
          color: black;
        }
      }
    }
  }
  // 网页中部模块
  div.center_module {
    width: 1920px;

    .box_1226 {
      width: 1226px;
      margin: 0 auto;

      // 模块顶部
      .top {
        display: flex;
        margin-top: 20px;
        box-shadow: 0 0 5px 5px #ccc;

        // 模块顶部的右侧部分
        .top_left {
          // #b();
          width: 309px;
          height: 130px;
          border-right: 1px solid #ccc;

          img {
            vertical-align: bottom;
            width: 15px;
            height: 15px;
          }

          > p {
            width: 270px;
            margin-left: 309px - 270;

            &:first-of-type {
              display: flex;
              align-items: center;
              line-height: 40px;
              font-size: 16px;
              font-style: "微软雅黑";
              font-weight: bold;

              & > img {
              }
            }

            &:last-of-type {
              width: 259px;
              font-size: 14px;
            }

            > a {
              text-decoration: none;
              color: #333;
            }
          }

          > ul {
            // #b();
            float: right;
            display: flex;
            justify-content: center;
            width: 270px;
            padding-right: 0px;
            border-top: 1px #ccc solid;
            margin-top: 10px;
            // margin-left: 309px - 275;
            color: #333;

            > li {
              // #b();
              flex: 1;
              display: flex;
              align-items: center;
              line-height: 40px;
              // padding-right: 5px;

              > img {
                margin-right: 5px;
              }
            }
          }
        }

        // 模块顶部的中间部分
        .top_center {
          display: flex;
          align-items: center;
          margin: 0 30px;

          > ul {
            // #b();
            display: flex;
            justify-content: center;
            width: 520px;

            > li {
              // #b();
              flex: 1;

              > a {
                text-decoration: none;
                color: #333;

                > img {
                  display: block;
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                  width: 60px;
                  height: 60px;
                }

                > p {
                  margin-top: 10px;
                  text-align: center;
                }
              }
            }
          }
        }

        // 模块顶部的右侧部分
        .top_right {
          width: 318px;
          position: relative;

          > img {
            display: block;
            width: 60px;
            height: 60px;
            margin: 20px auto 0 auto;
          }

          > div {
            // #b();
            display: flex;
            justify-content: center;
            margin-top: 10px;

            > a {
              color: #555;
              text-decoration: none;

              &:first-of-type {
                // #b();
                margin-right: 90px;
              }
            }
          }
        }
      }

      // 模块中部
      .center {
        // #b();
        margin-top: 36px;
        position: relative;

        > .module_lunbo {
          overflow: hidden;

          > ul {
            // #b();
            position: relative;
            display: flex;

            > li {
              > img {
                vertical-align: bottom;
              }
            }
          }

          // 左右按钮
          > a {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

            &.btn_left {
              left: 0;
            }

            &.btn_right {
              right: 0;
            }
          }
        }
      }

      // 模块底部
      .bottom {
        > .module_banner {
          // margin: 0 10px;
          overflow: hidden;

          > ul {
            display: flex;
            position: relative;

            > li {
              > a {
                > img {
                  vertical-align: bottom;
                }
              }
            }
          }
        }
      }
    }
  }
  // 网页楼层部分
  .louchen {
    width: 1920px;
    background-color: #eee;
    padding: 30px 0;
    //长为1226的容器
    .box1226 {
      width: 1226px;
      margin: 0 auto;
      //网页主体、网页楼层、楼层项
      .louchen1 {
        margin-top: -20px;
        //楼层顶栏标题
        .topic {
          height: 54px;
          // #b();
          > a {
            color: #333;
            margin-top: 27px;
            transform: translateY(-50%);
            //主体、楼层、楼层项、顶标题、标题左文字
            &:first-of-type {
              text-decoration: none;
              float: left;
              margin-left: 30px;
              font-weight: 400;
              font-size: 20px;
              cursor: default;
              position: relative;
              // #b();
              &::before {
                content: "";
                display: block;
                width: 4px;
                height: 21px;
                background-color: blue;
                position: absolute;
                left: -20px;
                top: 3px;
              }
            }
            //主体、楼层、楼层项、顶部标题、标题右文字
            &:last-of-type {
              float: right;
              font-size: 15px;
              margin-right: 20px;
            }
          }
        }
        //网页主体、楼层、楼层项、商品区
        .list {
          display: flex;
          //网页主体、楼层、楼层项、左侧的展示图
          .left {
            > img {
              vertical-align: bottom;
              height: 600px;
            }
          }
          //主体、楼层、楼层项、商品列表区
          .right {
            //主体、楼层、楼层顶、商品列表区、商品列表
            > ul {
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-end;
              //主体、楼层、楼层项、商品列表区、商品列表、商品项
              > li {
                // flex: 1;
                margin-left: 12px;
                margin-bottom: 20px;
                width: 233px;
                height: 290px;
                // #b();
                background-color: #fff;
                > a {
                  text-decoration: none;
                  // 商品图
                  > img {
                    vertical-align: bottom;
                    width: 204px;
                    height: 204px;
                    // margin: 0 auto;
                    position: relative;
                    left: 50%;
                    transform: translateX(-50%);
                  }
                  > p {
                    // #b();
                    text-align: center;
                    //商品款式及颜色
                    &:first-of-type {
                      color: black;
                      font-size: 20px;
                    }
                    //cpu、gpu
                    &:nth-last-of-type(2) {
                      color: #999;
                      font-size: 14px;
                    }
                    > span {
                      // 拆扣价
                      &:first-of-type {
                        color: red;
                        font-size: 20px;
                      }
                      // 原价
                      &:last-of-type {
                        color: #ccc;
                        font-size: 15px;
                        text-decoration: line-through;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
